<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tab-header-span {
        padding: 5px;
        margin: 5px;
        background: #eee;
        border-radius: 5px;
        cursor: pointer;
      }
      .active {
        background: lightcoral;
        color: white;
      }
      .btn {
        /* width: 25px;
        height: 25px; */
        margin: 5px;
        padding: 10px;
        display: inline-block;
        text-align: center;
        background: lightsalmon;
        border-radius: 5px;
        cursor: pointer;
        color: white;
      }
      .danger {
        background: red;
        border: 2px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <hr />
      <!-- tab切换区域 -->

      <!-- cart购物车 
        1. 实现计算总价的功能
        2. 点击实现++ -- 
      -->
      <h1>class对象绑定：/ style绑定</h1>
      <button @click="handleToggleClass">切换class</button>

      <div style="width: 100px; height: 100px; text-align: center" :class="{danger: hasDanger}">我是按钮</div>
      <div style="width: 100px; height: 100px; text-align: center" :class="[activeClass]">我是按钮</div>
      <div class="btn" :style="{border: borderStyle, fontSize:fontSize+'px'}">我是按钮</div>
      <div class="btn" :style="styleObj">我是按钮</div>
      <div class="btn" :style="[styleObj,styleArrayObj]">我是按钮</div>
      <hr />
      <tab-nav :list="list"></tab-nav>
      <shop-cart></shop-cart>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      // 组件帮助我们快且高效的开发代码

      Vue.component('shop-cart', {
        // data写成函数形式
        data() {
          return {
            shopCart: [],
          }
        },
        created() {
          axios.get('./data.json').then((res) => {
            // console.log('res:', res.data)
            this.shopCart = res.data
            console.log('fu组件：', this.shopCart)
          })
        },
        computed: {
          num() {
            return this.shopCart.reduce((count, item) => {
              return count + item.count
            }, 0)
          },
        },
        methods: {
          // 增加
          handleAddItem(item) {
            item.count++
          },
          // 减少
          handleReduceItem(item) {
            if (item.count <= 1) {
              if (window.confirm('确定删除吗?')) {
                // 如果要删除，找到下标 调用splice方法，删除
                let removeIndex = this.shopCart.findIndex((v) => v.id === item.id)
                this.shopCart.splice(removeIndex, 1)
              }
              return
            }
            item.count--
          },
        },
        template: `
        <div class="shop-cart-wrapper">
         <h1>{{num}}</h1>
        <ul v-for="(item, index) in shopCart">
          <li>{{item.cName}}</li>
          <li>
            <span class="btn" @click="handleAddItem(item)">+</span>
            <span class="btn">{{item.count}}</span>
            <span class="btn" @click="handleReduceItem(item)">-</span>
          </li>
        </ul>
      </div>`,
      })

      Vue.component('tab-nav', {
        data() {
          return {
            tabIndex: 0, // 绑定一个全局的下标
          }
        },
        // 接收父组件传递给我的数据
        props: ['list'],
        methods: {
          handleTabClick(index) {
            this.tabIndex = index
          },
        },
        template: `<div class="tab-wrapper">
        <div class="tab-header">
          <span
            v-for="(item, index) in list"
            class="tab-header-span"
            :class="tabIndex === index?'active':''"
            @click="handleTabClick(index)"
          >
            {{item.cityName}}
          </span>
        </div>
        <ul class="tab-content">
          <li v-for="v in list[tabIndex].children">{{v.countName}}</li>
        </ul>
      </div>`,
      })

      new Vue({
        el: '#app',
        data: {
          styleObj: { color: 'red', fontSize: '13px' },
          styleArrayObj: { color: 'blue', fontSize: '13px' },
          borderStyle: '10px solid #000',
          fontSize: '30',
          activeClass: 'active',
          isActive: true,
          hasDanger: true,
          msg: 'hello Vue!',
          tabIndex: 0, // 绑定一个全局的下标
          list: [
            {
              id: 1,
              cityName: '北京',
              children: [
                {
                  id: '1-1',
                  countName: '海淀区',
                },
                {
                  id: '1-2',
                  countName: '朝阳区',
                },
                {
                  id: '1-2',
                  countName: '丰台区',
                },
              ],
            },
            {
              id: 2,
              cityName: '上海',
              children: [
                {
                  id: '2-1',
                  countName: '奉贤区',
                },
                {
                  id: '2-2',
                  countName: '松江区',
                },
              ],
            },
          ],
          shopCart: [],
        },
        methods: {
          // 切换class
          handleToggleClass() {
            this.hasDanger = !this.hasDanger
          },
        },
        // 生命周期
        // created 是初始化数据的生命周期
        // vue中，所有的数据，要绑定好才能使用，绑定在data中
        created() {
          axios.get('./data.json').then((res) => {
            // console.log('res:', res.data)
            this.shopCart = res.data
            console.log('fu组件：', this.shopCart)
          })
        },
        watch: {
          // 要观察的对象(一般为非DOM事件):function(newVal, oldVal){
          // }
          shopCart(newVal, oldVal) {
            // console.log('newVal:', newVal)
            // console.log('oldVal:', oldVal)
          },
        },
        // 计算属性
        computed: {
          // 1. 直接当做普通属性调用不加括号
          // 2. 任何data中数据变化立即重新计算
          // 3. 计算属性会缓存
          // 4. return 必须retrun结果
          num() {
            // 第一种计算总价的方法
            // let count = 0
            // this.shopCart.forEach((item) => {
            //   count += item.count
            // })
            // return count
            // 第二种计算总价的方法
            return this.shopCart.reduce((count, item) => {
              return count + item.count
            }, 0)
          },
        },
      })
    </script>
  </body>
</html>
